<template>
	<view class="p-12 text-white">
		<view class="bg-black-1 round-12 py-15 px-20">
			<view class="flex flex-y-center gap-10">
				<image :src="USERINFO?.avatar?USERINFO?.avatar:WEBCONFIG?.web_logo" class="avatar round-circle"></image>
				<view class="flex-1">
					<view class="mb-4 flex flex-y-center gap-4">
						<text class="fs-17 fw-600 text-ellipsis-1">{{USERINFO?.nickname}}</text>
						<view class="w-20 h-20 " style="min-width: 20px;min-height: 20px;">
							<image src="/static/image/vip.png" class="w-20 h-20"></image>
						</view>
					</view>
					<text class="fs-14 text-grey-1">推荐人:{{USERINFO?.parent_name ||'平台'}}</text>
				</view>
			</view>
			<view class="grid-columns-2 gap-6  mt-20 ">
				<view class="flex flex-column   gap-4  gap-4 relative">
					<text class="fs-14 text-grey-1">订单总数(个)</text>
					<text class="fs-18 fw-600">{{detail?.orderCount}}</text>
					<view class="line absolute right-0 w-1 h-p-100"></view>
				</view>
				<view class="flex flex-column gap-4  gap-4 text-right">
					<text class="fs-14 text-grey-1">订单总金额(元)</text>
					<text class="fs-18 fw-600">{{detail?.orderPrice}}</text>
				</view>
			</view>
		</view>
		<view class="mt-12 fw-600">邀请明细</view>
		<view class="mt-12">
			<view class=" bg-black-1 round-8  flex flex-y-center pl-10   gap-4 mt-15">
				<text class="iconfont icon-sousuo"></text>
				<view class="flex-1">
					<input class="fs-14" placeholder="请输入用户昵称" v-model="query.nickname" />
				</view>
				<view class="gradient text-white px-16 py-8 round-8 w-60 m-4  fs-14 flex flex-center fs-14 fw-600"
					@click="paging.reload()">搜索
				</view>
			</view>

			<z-paging ref="paging" v-model='list' @query="getList" use-page-scroll>
				<template v-for="(item,index) in list" :key='index'>
					<view class="mt-12 bg-black-1  round-12 px-15">
						<view class="flex flex-x-space-between py-17 b-l">
							<text class="fs-16">{{item.type==1?'开通会员分成收益':'算力充值分成收益'}}</text>
							<text class="fs-18 red">收益：{{item.commission}}元</text>
						</view>
						<view class="py-12 flex flex-column gap-12 fs-14 ">
							<view class="flex flex-y-center">
								<text class="text-grey-1">{{item.type==1 ?'开通会员':'充值算力'}} ：</text>
								<text>{{item.order_price}}元</text>
							</view>
							<view class="flex flex-y-center">
								<text class="text-grey-1">{{item.type==1 ?'开通':'充值'}}用户 ：</text>
								<text>{{item.provider_nickname}}</text>
							</view>
						</view>
					</view>

					<!-- #ifdef MP-WEIXIN -->
					<view class="p-12 overflow-hidden"
						v-if="WEBCONFIG?.wx_ad_status.includes('wx_video')&&(index+1)%5==0 ">
						<ad :unit-id="WEBCONFIG?.wx_video" ad-theme="white"></ad>
					</view>
					<!-- #endif -->
				</template>

			</z-paging>
		</view>
	</view>
</template>

<script setup>
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	import { $http, $page } from '@/utils';
	import { useRefs, useUserStore, useWebConfigStore } from '@/stores'
	import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	import { ref } from 'vue';
	const { USERINFO } = useRefs(useUserStore())
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const query = ref({
		type: 0,
		nickname: ''
	})
	const paging = ref()
	const list = ref([])
	useZPaging(paging)
	onLoad(() => {
		getTeamInfo()
	})
	const detail = ref({
		orderPrice: '--',
		orderCount: '--',
	})
	const getTeamInfo = () => {
		$http.get('Bill/getBillInfo').then(res => {
			detail.value = res.data
		})
	}

	const getList = (page, limit) => {
		uni.showLoading({
			title: '加载中...'
		})
		$http.get('Order/getDealerOrder', { page: page, limit: limit, ...query.value }).then(res => {
			paging.value.complete(res.data)
		})
	}
</script>

<style>
	.line {
		background: linear-gradient(180deg, rgba(196, 196, 196, 0) 0%, #C4C4C4 49%, rgba(196, 196, 196, 0) 100%);
	}

	.b-l {
		border-bottom: 0.5px solid #343434;
	}

</style>